<template>
  <div class="profile">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="user-card">
          <div class="avatar-container">
            <el-avatar :size="100" :src="userInfo.avatar" />
            <h2>{{ userInfo.nickname }}</h2>
          </div>
          <div class="user-stats">
            <div class="stat-item">
              <span class="label">我的订单</span>
              <span class="value">{{ userInfo.orderCount }}</span>
            </div>
            <div class="stat-item">
              <span class="label">团购中</span>
              <span class="value">{{ userInfo.activeGroups }}</span>
            </div>
            <div class="stat-item">
              <span class="label">收藏商品</span>
              <span class="value">{{ userInfo.favoriteCount }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="18">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>个人信息</span>
              <el-button type="primary" @click="handleEdit">编辑资料</el-button>
            </div>
          </template>
          
          <el-form
            :model="userInfo"
            :disabled="!isEditing"
            label-width="100px"
          >
            <el-form-item label="头像">
              <el-upload
                v-if="isEditing"
                class="avatar-uploader"
                action="/api/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
              >
                <img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar">
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
              <el-avatar v-else :size="100" :src="userInfo.avatar" />
            </el-form-item>
            
            <el-form-item label="昵称">
              <el-input v-model="userInfo.nickname" />
            </el-form-item>
            
            <el-form-item label="手机号码">
              <el-input v-model="userInfo.phone" />
            </el-form-item>
            
            <el-form-item label="电子邮箱">
              <el-input v-model="userInfo.email" />
            </el-form-item>
            
            <el-form-item label="收货地址">
              <div v-if="!isEditing">
                <p v-for="(address, index) in userInfo.addresses" :key="index">
                  {{ address }}
                </p>
              </div>
              <div v-else>
                <div v-for="(address, index) in userInfo.addresses" :key="index" class="address-item">
                  <el-input v-model="userInfo.addresses[index]" />
                  <el-button type="danger" link @click="removeAddress(index)">删除</el-button>
                </div>
                <el-button type="primary" link @click="addAddress">添加地址</el-button>
              </div>
            </el-form-item>
            
            <el-form-item v-if="isEditing">
              <el-button type="primary" @click="handleSave">保存</el-button>
              <el-button @click="handleCancel">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        
        <el-card class="recent-orders" style="margin-top: 20px;">
          <template #header>
            <div class="card-header">
              <span>最近订单</span>
              <el-button link @click="$router.push('/orders')">查看全部</el-button>
            </div>
          </template>
          
          <el-table :data="recentOrders" style="width: 100%">
            <el-table-column prop="orderNo" label="订单编号" width="180" />
            <el-table-column prop="createTime" label="下单时间" width="180" />
            <el-table-column prop="amount" label="订单金额" width="120">
              <template #default="scope">
                ¥{{ scope.row.amount.toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="订单状态">
              <template #default="scope">
                <el-tag :type="getOrderStatusType(scope.row.status)">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template #default="scope">
                <el-button link @click="viewOrder(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const isEditing = ref(false)

// 模拟用户数据
const userInfo = ref({
  avatar: 'https://via.placeholder.com/100x100',
  nickname: '测试用户',
  phone: '13800138000',
  email: 'test@example.com',
  addresses: ['广东省广州市天河区珠江新城', '北京市朝阳区三里屯'],
  orderCount: 12,
  activeGroups: 3,
  favoriteCount: 8,
})

// 模拟最近订单数据
const recentOrders = ref([
  {
    orderNo: 'ORDER202403010001',
    createTime: '2024-03-01 12:00:00',
    amount: 299.9,
    status: '待付款',
  },
  {
    orderNo: 'ORDER202402280002',
    createTime: '2024-02-28 15:30:00',
    amount: 599.9,
    status: '已完成',
  },
])

const handleEdit = () => {
  isEditing.value = true
}

const handleSave = () => {
  // TODO: 实现保存逻辑
  ElMessage.success('保存成功')
  isEditing.value = false
}

const handleCancel = () => {
  isEditing.value = false
}

const handleAvatarSuccess = (response) => {
  userInfo.value.avatar = response.url
}

const addAddress = () => {
  userInfo.value.addresses.push('')
}

const removeAddress = (index) => {
  userInfo.value.addresses.splice(index, 1)
}

const getOrderStatusType = (status) => {
  const statusMap = {
    '待付款': 'warning',
    '待发货': 'info',
    '已发货': '',
    '已完成': 'success',
    '已取消': 'danger',
  }
  return statusMap[status]
}

const viewOrder = (order) => {
  // TODO: 实现查看订单详情逻辑
  console.log('查看订单:', order)
}
</script>

<style scoped>
.profile {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.user-card {
  text-align: center;
}

.avatar-container {
  padding: 20px 0;
}

.avatar-container h2 {
  margin: 10px 0;
  font-size: 18px;
}

.user-stats {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  border-top: 1px solid #eee;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-item .label {
  font-size: 14px;
  color: #666;
}

.stat-item .value {
  font-size: 20px;
  font-weight: bold;
  color: #409EFF;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar-uploader {
  text-align: center;
}

.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
}

.address-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.recent-orders {
  margin-top: 20px;
}
</style> 